<template>
	<view class="content">

		<me-scroll-uni :down="downOption" 
						@down="downCallback" 
						:up="upOption"
						@up="upCallback" 
						@init="mescrollInit"
						bottom="0" top="20">
			<view class="goods-list">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
					<view class="image-wrapper">
						<image :src="item.images" mode="aspectFill" @click="navToDetailPage(item)"></image>
						<text class="iconfont icon-shanchu" @tap="delete_favor(item,index)"></text>
					</view>
					<text class="title clamp ellipsis">{{item.title}}</text>
					<view class="price-box">
						<text class="price">{{item.price}}</text>
					</view>
				</view>
			</view>
		</me-scroll-uni>

	</view>
</template>

<script>
	import meScrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			meScrollUni,
		},
		data() {
			return {
				goodsList: [],
				
				mescroll: null, // mescroll实例对象
				// 下拉刷新的常用配置
				downOption: {
					use: true, //是否启用下拉刷新;默认true
					auto: true //是否在初始化完毕之后自动执行下拉刷新的回调;默认true 
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, //是否启用上拉加载;默认true
					auto: true, //是否在初始化完毕之后自动执行上拉加载的回调,默认true
					page: {
						num: 0, //当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 //每页数据的数量，默认20
					},
					noMoreSize: 3, //配置列表的总数量要大于5条才显示‘--END--’的提示
					empty: {
						tip: '暂无相关数据'
					}
				}
			};
		},

		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			// 下拉刷新的回调
			downCallback(mescroll) {
				setTimeout(function() {
					mescroll.endSuccess();
				}, 1000);
			},
			// 上拉加载的回调
			upCallback(mescroll) {
				// 此时mescroll会携带page的参数：
				let pageNum = mescroll.num; //页码，默认从1开始
				let pageSize = mescroll.size; //页长,默认每页10条
				this.loadData(pageNum, pageSize,mescroll);

			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(pageNum = 1, pageSize =10,mescroll = []) {
				var self = this;
				// 获取商品列表信息
				var favorListUrl = this.requestUrl.favorList;
				this.util.request(favorListUrl, 'post', function(res) {
					if (res.data.code == 0 && res.data.data) {
						let curPageData = res.data.data.data;
						let totalPage = res.data.data.page_total;
						self.goodsList = self.goodsList.concat(curPageData);
						// 最后一页了，显示end
						mescroll.endByPage(curPageData.length, totalPage);
					}
				});
			},
			// 取消收藏
			delete_favor(item,index){
				let self=this;
				let params={
					data:{
						id:item.goods_id
					}
				}
				let cancelFavorUrl=this.requestUrl.cancleFavor;
				this.util.request(cancelFavorUrl,'post',function(res){
					if(res.data.code==0){
						self.goodsList.splice(index,1);
						uni.showToast({
							title:res.data.msg,
							duration:1500
						})
					}
					
				},params)
			},
			//详情
			navToDetailPage(item) {
				let id = item.id;
				let cid= item.category_id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}&cid=${cid}`
				})
			},
			stopPrevent() {}
		},
	}
</script>

<style lang="scss" scoped>
	page,
	.content {
		background: $uni-bg-color;
	}

	.content {
		padding-top: 96upx;
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 30upx;
		background: #fff;

		.goods-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				opacity: 1;
				border-radius: $uni-border-radius-base;
				border:solid 1px $uni-border-color
			}
			.icon-shanchu{background:#000000;color: #fff;position: absolute;top:-15rpx;right:0;width:30rpx;height: 30rpx;border-radius: 100%;}
		}

		.title {
			font-size:$uni-font-size-sm;
			color: $uni-text-color;
			line-height: 80upx;
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $uni-text-color;
		}

		.price {
			font-size: $uni-font-size-base;
			color: $uni-text-color-zhu;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26upx;
			}
		}
	}
</style>
